<template>
  <el-table v-loading="loading" :data="shipmentList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column label="运单编号" align="left" prop="shipmentCode" width="140" :show-overflow-tooltip="true" />
    <el-table-column label="发货方" align="left" prop="senderName" width="120" :show-overflow-tooltip="true" />
    <el-table-column label="发货地址" align="left" prop="senderAddress" width="180" :show-overflow-tooltip="true" />
    <el-table-column label="收货方" align="left" prop="receiverName" width="120" :show-overflow-tooltip="true" />
    <el-table-column label="收货地址" align="left" prop="receiverAddress" width="180" :show-overflow-tooltip="true" />
    <el-table-column label="运单状态" align="center" prop="shipmentStatus" width="100">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.shipmentStatus == '1'" type="info" size="mini">待发货</el-tag>
        <el-tag v-else-if="scope.row.shipmentStatus == '2'" type="warning" size="mini">运输中</el-tag>
        <el-tag v-else-if="scope.row.shipmentStatus == '3'" type="success" size="mini">已签收</el-tag>
        <el-tag v-else-if="scope.row.shipmentStatus == '4'" type="danger" size="mini">已取消</el-tag>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="货物名称" align="left" prop="goodsName" width="120" :show-overflow-tooltip="true" />
    <el-table-column label="货物重量(kg)" align="center" prop="goodsWeight" width="100" />
    <el-table-column label="运输方式" align="center" prop="transportMode" width="100">
      <template slot-scope="scope">
        <span v-if="scope.row.transportMode == '1'">公路运输</span>
        <span v-else-if="scope.row.transportMode == '2'">铁路运输</span>
        <span v-else-if="scope.row.transportMode == '3'">水路运输</span>
        <span v-else-if="scope.row.transportMode == '4'">航空运输</span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="预计发货时间" align="center" prop="estimatedShipDate" width="120">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.estimatedShipDate, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="预计到达时间" align="center" prop="estimatedArrivalDate" width="120">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.estimatedArrivalDate, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" width="120">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="80" fixed="right" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-view"
          @click="handleDetail(scope.row)"
          v-hasPermi="['logistics:shipment:query']"
        >详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'ShipmentTable',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    shipmentList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.$emit('detail', row)
    }
  }
}
</script>